<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>语义网络演示系统</title>
    <link rel="stylesheet" href="scriptOperate.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="shortcut icon" href="shortcut.ico" type="image/x-icon">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <meta charset="UTF-8">
</head>

<body>


    <div class="container">

        <div class="title-bar" onclick="window.location.href='index.html'">
            <h1>语义网络 - 打破信息孤岛，重构数据价值</h1>
        </div>


        <div class="content-area">

            <!-- 左侧区域 -->
            <div class="flex-left">
                <h3 class="options-title">语义网络</h3>
                <div id="network-tree" class="tree">
                </div>


                <div class="button-group">
                    <button onclick="createNetwork()">创建语义网络</button>
                    <button onclick="copyNetwork()">复制语义网络</button>
                    <button onclick="deleteNetwork()">删除语义网络</button>
                    <button onclick="importNetwork()">导入语义网络</button>
                    <button onclick="mergeNetworks()">语义网络融合</button>
                </div>
            </div>

            <!-- 中间区域 -->
            <div class="flex-middle">
                <div class="script-section">
                    <div class="script-header">
                        <span>语义网络地址：</span>
                        <a id="network-url"></a>
                        <button id="copy-url-btn" style="margin-left: 5px; padding: 2px 8px; font-size: 12px;"
                            title="复制链接地址">
                            <i class="copy-icon">📋</i>
                        </button>
                        <div class="header-actions" style="display: flex; gap: 10px; margin-top: 10px;">
                            <button onclick="registerImplementer()">注册实现器</button>
                            <button onclick="saveNetwork()">保存</button>
                            <div style="margin-left: auto;">
                                <button id="toggle-view-btn">脚本/图形</button>
                                <button onclick="submitCode()">提交代码</button>
                            </div>
                        </div>
                    </div>
                    <!-- 图形区域 -->
                    <div id="graph-view" class="view-container">
                        <label>图形区域</label>
                        <div id="graph-editor" class="graph-area"></div>
                    </div>
                    <!-- 脚本区域 -->
                    <div id="script-view" class="view-container">
                        <div style="display: flex; align-items: center; gap: 5px;">
                            <label for="code-editor">脚本区域</label>
                            <span class="hint-asterisk" title="脚本语法提示">*</span>
                        </div>
                        <textarea class="script-area" id="code-editor" onkeydown="handleKeyDown(event)"></textarea>
                    </div>
                </div>
                <div class="execution-section">
                    <label for="command-input">执行命令</label>
                    <input type="text" id="command-input" placeholder="请输入执行命令">
                    <button onclick="possiblePathQuery()">可能路径查询</button>
                    <button onclick="exactlyPathQuery()">精确路径查询</button>
                    <button onclick="executeCommand()">执行</button>
                    <br>
                    <label>路径和结果展示</label>
                    <div class="execution-results" id="results-area"></div>
                </div>
            </div>

            <!-- 右侧区域 -->
            <div class="flex-right">
                <select id="version-select" onchange="versionChanged()">
                    <option>版本列表</option>
                    <option>v1.0</option>
                    <option>v2.0</option>
                </select>
                <div class="custom-options-panel">
                    <h3 class="options-title">实现器列表</h3>
                    <div id="dynamic-options-container" class="options-container">
                        <!-- 选项将通过JS动态生成 -->
                    </div>
                </div>

                <input type="text" id="search-box" placeholder="搜索" onkeyup="searchTree()">
                <h3 class="options-title">关系定义</h3>
                <div id="relation-define-tree" class="tree"></div>
                <h3 class="options-title">事物列表</h3>
                <div id="thing-tree" class="tree"></div>
                <h3 class="options-title">关系实例</h3>
                <div id="relation-instance-tree" class="tree"></div>
            </div>

            <div id="customPromptModal" class="modal" style="display: none;">
                <div class="modal-content">
                    <h3 id="promptTitle">输入新网络名称</h3>
                    <input type="text" id="customPromptInput" placeholder="请输入名称...">
                    <div class="modal-buttons">
                        <button id="promptCancelBtn">取消</button>
                        <button id="promptConfirmBtn">确认</button>
                    </div>
                </div>
            </div>
            <div id="toastNotification" class="toast" style="display: none;">
                <div class="toast-content">
                    <span id="toastMessage"></span>
                </div>
            </div>

        </div>



    </div>
    <script src="scriptOperate.js"></script>
</body>

</html>